<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        render(){
            return (
                <div>
                    <h3>APP</h3>
                    <button onClick={()=>{
                        this.forceUpdate();
                    }}>你过来呀！</button>
                    <Child userName={"zhangsan"}></Child>
                </div>
            )
        }
    }
    class Child extends React.Component{
        state = {
            b:2
        }
        // 职责：用于将接收到的属性作为当前状态的值。
        // 1- 该方法是一个静态方法
        // 2- 使用该方法必须要为当前组件设置状态
        // 3- 该方法必须要有返回值，返回值必须是对象或者null
        // 4- 如果该方法返回的是一个对象，那么该对象会与当前的状态进行合并
        // 5- 该方法中的this为undefined
        // 6- 该方法会在挂载时，更新时（this.setState,父组件执行render时，this.forceUpdate)
        static getDerivedStateFromProps(nextProps){
            console.log("1-getDerivedStateFromProps",nextProps,this);
            return {
                a:1,
                // b:100,
                ...nextProps
            }
        }
        render(){
            console.log("2-render");
            return (
                <div>
                    <h3>Child</h3>
                    <button onClick={()=>{
                        // this.forceUpdate();
                        this.setState({
                            b:200
                        })
                    }}>{this.state.b}</button>
                </div>
            )
        }
        // 1- 该方法需要与componentDidUpdate结合使用
        // 2- 该方法需要有返回值，该返回值会作为componentDidUpdate的第三个参数
        // 3- 该方法执行时，视图还未更新
        // 作用：可以在此处捕获用户的行为。
        getSnapshotBeforeUpdate(){
            console.log("3-getSnapshotBeforeUpdate",this.state.b,document.querySelectorAll("button")[1].innerText);
            return 100;
        }
        componentDidUpdate(prevProps,prevState,snapshot){
            // 发送ajax请求，告知服务端，服务端可以对用户的行为进行日志处理。
            console.log("4-componentDidUpdate",snapshot)
        }
    }
    root.render((
        <App></App>
    ))
</script>
</html>